<template>
  <div class="login-container">
    <div class="w-100 h-100 over-hidden">
      <div class="logo-container p-3">
        <logo-component/>
      </div>
      <div class="w-100 h-100 d-flex align-center justify-content-between mt-5">
        <div class="box-image logo-container flex-2">
          <div class="box-card2"></div>
        </div>
        <div style="width: 3%;"></div>
        <div class="box-card logo-container">
          <el-form
            ref="loginFormRef"
            :rules="loginRules"
            :model="loginData"
            class="login-form"
          >
            <div class="flex text-black items-center">
              <div class="text-2xl flex-1 text-center title">
                欢迎登录系统
                <div class="bottom-line"></div>
              </div>
            </div>
            <div class="login-content">
              <!-- 用户名称 -->
              <el-form-item prop="accountPhone">
                <div class="p-2">
                  <svg-icon style="color: #3276ff;" icon-class="user"/>
                </div>
                <el-input
                  class="d-flex align-items-center"
                  ref="username"
                  size="large"
                  v-model="loginData.accountPhone"
                  placeholder="输入用户名"
                  name="username"
                />
              </el-form-item>

              <el-tooltip
                :disabled="isCapslock === false"
                content="Caps lock is On"
                placement="right"
              >
                <el-form-item prop="accountPassword">
                  <span class="p-2">
                    <svg-icon style="color: #3276ff;" icon-class="password"/>
                  </span>
                  <!-- 密码 -->
                  <el-input
                    class="d-flex align-items-center"
                    v-model="loginData.accountPassword"
                    placeholder="密码"
                    :type="passwordVisible === false ? 'password' : 'input'"
                    size="large"
                    name="password"
                    @keyup.native="checkCapslock"
                    @keyup.enter.native="handleLogin"
                  />
                  <span class="mr-2 d-flex align-items-center" @click="passwordVisible = !passwordVisible">
                    <svg-icon
                      :icon-class="passwordVisible === false ? 'eye' : 'eye-open'"
                      style="color: #3276ff;"
                      class="text-gray cursor-pointer"
                    />
                  </span>
                </el-form-item>
              </el-tooltip>
              <el-button
                size="default"
                :loading="loading"
                class="w-full mt-3"
                @click.prevent="handleLogin"
              >登录
              </el-button>
            </div>
          </el-form>
        </div>
      </div>
    </div>

    <!-- 重置密码弹框 -->
    <global-message-box
      v-if="isMessageBoxShow"
      @messageBoxSave="messageBoxSave"
      @messageBoxReceive="isMessageBoxShow = false"
    >
      <template #content>
        <div class="messageBoxContent">
          <el-form ref="form" :model="resetForm">
            <el-form-item>
              <span class="p-2">
                <svg-icon icon-class="password"/>
              </span>
              <el-input
                v-model="resetForm.onePassword"
                placeholder="请输入密码"
                class="d-flex align-items-center"
                :type="resetOnePasswordVisible === false ? 'password' : 'input'"
              />
              <span
                class="mr-2 d-flex align-items-center"
                @click="resetOnePasswordVisible = !resetOnePasswordVisible"
              >
                <svg-icon
                  :icon-class="
                    resetOnePasswordVisible === false ? 'eye' : 'eye-open'
                  "
                  class="text-gray cursor-pointer"
                />
              </span>
            </el-form-item>
            <el-form-item>
              <span class="p-2">
                <svg-icon icon-class="password"/>
              </span>
              <el-input
                v-model="resetForm.twoPassword"
                placeholder="请再次却密码"
                @keyup.enter.native="messageBoxSave"
                class="d-flex align-items-center"
                :type="resetTwpPasswordVisible === false ? 'password' : 'input'"
              />
              <span
                class="mr-2 d-flex align-items-center"
                @click="resetTwpPasswordVisible = !resetTwpPasswordVisible"
              >
                <svg-icon
                  :icon-class="
                    resetTwpPasswordVisible === false ? 'eye' : 'eye-open'
                  "
                  class="text-gray cursor-pointer"
                />
              </span>
            </el-form-item>
          </el-form>
        </div>
      </template>
    </global-message-box>
  </div>
</template>

<script>
  import { passwordValidator } from "./validator"
  import logoComponent from "@/components/LoginLogo"
  import { updateLAccountPwd } from "@/api/userControl/account"

  export default {
    name: "App",
    data() {
      return {
        loading: false,
        isCapslock: false,
        passwordVisible: false,
        resetOnePasswordVisible: false,
        resetTwpPasswordVisible: false,
        isMessageBoxShow: false,
        captchaBase64: "",
        passwordCheckbox: [],
        loginData: {
          accountPhone: 15380766060,
          accountPassword: "888888"
        },
        loginRules: {
          accountName: [{required: true, trigger: "blur"}],
          accountPassword: [
            {required: true, trigger: "blur", validator: passwordValidator}
          ]
        },
        url: "../../assets/login/login.png",
        resetForm: {
          onePassword: "",
          twoPassword: ""
        } //重置密码form
      }
    },
    components: {
      logoComponent
    },
    methods: {
      /**
       * 检查输入大小写状态
       */
      checkCapslock(e) {
        const {key} = e
        this.isCapslock = key && key.length === 1 && key >= "A" && key <= "Z"
      },
      handleLogin() {
        this.$refs.loginFormRef.validate((valid) => {
          if (valid) {
            this.loading = true
            this.$store.dispatch("user/login", this.loginData).then((show) => {
              if (show) {
                this.isMessageBoxShow = show
              } else {
                this.$router.push({path: "/userControl/menuControl"})
              }
            }).catch(() => {
              // 验证失败
            }).finally(() => {
              this.loading = false
            })
          }
        })
      },
      async messageBoxSave() {
        if (this.resetForm.onePassword == this.resetForm.twoPassword) {
          this.$refs.form.validate((valid) => {
            if (valid) {
              this.loading = true
              updateLAccountPwd({
                accountPhone: this.loginData.accountPhone,
                accountPassword: this.resetForm.onePassword
              }).then(res => {
                if (res.status == "200") {
                  const query = this.$route.query
                  const redirect = query.redirect ?? "/userControl/menuControl"

                  // todo query参数
                  const otherQueryParams = Object.keys(query).reduce((acc, cur) => {
                    if (cur !== "redirect") {
                      acc[cur] = query[cur]
                    }
                    return acc
                  }, {})

                  this.$router.push({path: redirect, query: otherQueryParams})
                }
              })
            }
          })
        } else {
          this.$message({
            message: "两次密码输入不一致！",
            type: "warning"
          })
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  .login-container {
    position: relative;
    width: 100%;
    min-height: 100%;
    overflow: hidden;
    background: url("../../assets/login/login-bg.png") no-repeat;
    background-size: 100% 100%;
    padding: 90px 150px 0 150px;
    box-sizing: border-box;

    .logo-container {
      border: 1px solid #ffffff;
      border-radius: 21px;
      box-shadow: 0px 0px 4px 4px rgba(165, 172, 186, 0.24);
    }

    .box-image {
      width: 60%;
      height: 100%;

      .box-card2 {
        display: inline-block;
        width: 100%;
        height: 550px;
        background: url("../../assets/login/login.png") no-repeat;
        background-size: 100% 100%;
      }
    }


    .box-card {
      width: 37%;
      height: 550px;

      .title {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding-bottom: 30px;
        font-size: 22px;
        font-weight: 500;
        color: #4A4A4A;

        .bottom-line {
          width: 42px;
          height: 4px;
          margin-top: 12px;
          background: #053feb;
        }
      }

      .login-form {
        width: 520px;
        max-width: 100%;
        padding: 80px;
        margin: 0 auto;
        overflow: hidden;

        .captcha {
          position: absolute;
          top: 0;
          right: 0;

          img {
            width: 120px;
            height: 48px;
            cursor: pointer;
          }
        }
      }

      .login-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        .checkbox {
          .el-form-item {
            background: transparent;
            border-radius: 5px;
          }
        }

        .w-full {
          width: 408px;
          height: 53px;
          background-color: #3276FF;
          border: 2px solid #3276FF;
          color: #ffffff;
        }
      }
    }

    .messageBoxContent {
      width: 100%;
      height: 100%;

      ::v-deep.el-input__inner {
        color: #989898;
        background: transparent;
        border: 0;
        border-radius: 0;
        caret-color: #989898;

        &:-webkit-autofill {
          box-shadow: 0 0 0 1000px transparent inset !important;
          -webkit-text-fill-color: #fff !important;
        }

        &:-webkit-autofill,
        &:-webkit-autofill:hover,
        &:-webkit-autofill:focus,
        &:-webkit-autofill:active {
          transition: color 99999s ease-out, background-color 99999s ease-out;
          transition-delay: 99999s;
        }
      }
    }
  }

  .el-form-item {
    width: 418px;
    // background: rgb(0 0 0 / 10%);
    background: #f1f4f8;
    border: 1px solid rgb(255 255 255 / 10%);
    border-radius: 5px;
    padding: 0 10px;

    ::v-deep.el-form-item__content {
      display: flex;
    }
  }

  .el-input {
    background: transparent;
  }

  .login-content {
    ::v-deep.el-input__inner {
      color: #989898;
      background: transparent;
      border: 0;
      border-radius: 0;
      caret-color: #989898;

      &:-webkit-autofill {
        box-shadow: 0 0 0 1000px transparent inset !important;
        -webkit-text-fill-color: #fff !important;
      }

      &:-webkit-autofill,
      &:-webkit-autofill:hover,
      &:-webkit-autofill:focus,
      &:-webkit-autofill:active {
        transition: color 99999s ease-out, background-color 99999s ease-out;
        transition-delay: 99999s;
      }
    }
  }
</style>
